<html>
<head>
<title>Choose your city:</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// http://www.groupon.com/api/v1/divisions
// 


$(document).ready(function() {
        $.ajax({url:'http://www.groupon.com/api/v1/divisions?format=json', beforeSend:addAPI, dataType:'json', error:errorData, success:parseData});
});

function addAPI(xhr) {
        xhr.setRequestHeader('X-GrouponToken', 'e97b22bbbffc1b83d8d8f6fec6a55e3f15dcb8ab');
}

function errorData() {
        $('#grid').html('<p>Could not retrieve Groupon cities. Make sure you are connected to the internet...</p>');
}

function parseData(json) {
        if (json.status.code != 0) {
                errorData();
                return;
        }
        var html = '';
        for (var x in json.divisions) {
                html += '<li><a title="'+json.divisions[x].id+'">'+json.divisions[x].name+'</a></li>';
        }
        $('#grid ul').append(html).hide().slideDown();
        if (localStorage['city_xml'] != null) {
                $('a[title='+localStorage['city_xml']+']').parent().addClass('selected');
        }
        $('a').click(function() {
                $('li').removeClass('selected');
                $(this).parent().addClass('selected');
                if (localStorage['city_xml'] == null || localStorage['city_xml'] != $(this).attr('title')) {
                        localStorage['last_checked'] = 0;
                }                       
                localStorage['city_xml'] = $(this).attr('title');
                localStorage['city_name'] = $(this).text();
                chrome.extension.getBackgroundPage().resetJSON();
                window.close();
        }).mouseover(function() {
                $(this).parent().addClass('mouse_over');
        }).mouseout(function() {
                $(this).parent().removeClass('mouse_over');
        });
}
</script>
<style type="text/css">
.selected, .mouse_over {
        background-color:#555;
}
.selected a, .mouse_over a {
        color:#4BC1DE;
        text-decoration:underline;
}
ul {
        display: block;
        float: left;
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 15px;
        overflow-x: hidden;
        overflow-y: hidden;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
        width: 960px;
}
li {
        border-bottom-color: #343434;
        border-bottom-style: dashed;
        border-bottom-width: 1px;
        border-left-color: black;
        border-left-style: none;
        border-left-width: 0px;
        border-right-color: #343434;
        border-right-style: dashed;
        border-right-width: 1px;
        border-top-color: black;
        border-top-style: none;
        border-top-width: 0px;
        display: block;
        float: left;
        font-size: 12px;
        height: 38px;
        list-style-type: none;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
        white-space: nowrap;
        width: 159px;
}
a {
        color: white;
        cursor:pointer;
        display: block;
        float: left;
        height: 18px;
        outline-color: white;
        outline-style: none;
        outline-width: 0px;
        padding-bottom: 10px;
        padding-left: 15px;
        padding-right: 0px;
        padding-top: 10px;
        text-decoration: none;
        width: 144px;
}
a:hover {
        color: #4BC1DE;
}
body {
        font-family: Arial, sans-serif;
        font-size: 12px;
        background-color:black;
        padding:0px;
        margin:0px;
        color:#fff;
}
#logo {
        background:#000 url(images/logo.png) no-repeat top left;
        height:157px;
}
#logo h1 {
        margin-left: 400px;
        font-size:36px;
        font-weight:bold;
        text-transform:uppercase;
        padding-top:80px;
}
#container {
        width:960px;
        margin:0 auto;
}
</style>
</head>
<body>
<div id="container">
  <div id="logo">
    <h1>Choose your City:</h1>
  </div>
  <div id="grid">
    <ul>
    </ul>
  </div>
</div>
</body>
</html>